{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
    <link rel="stylesheet" href="../../static/public_file/css/DepartmentSelection.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .add_background {
            background: #A9A9A9;
        }
        tr td {
            height: 35px;padding-right: 5px;outline: none;
        }
        th {
            text-align: center;
        }
        .file {
            position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="#" style="color: #0b0b0b;">
                <i class="iconfont icon-faqi"></i>
                <a href="Javascript:;" style="color: #0b0b0b;">会议请假</a>
            </a>
        </div>
        <div style="height: 100%;line-height: 40px;float: right;text-align: right;padding-right: 15px;">
            <button id="add_station" type="button" style="width: 100px;height: 30px;margin-top: 5px;border-radius: 3px;border: #1E90FF solid 1px;background-color: #1E90FF;color: white;line-height: 25px;"
                    onclick="save_data()">
                保存
            </button>
        </div>

        <div style="width: 15%;height: 100%;line-height: 40px;float: right;text-align: right;padding-right: 15px;">
            <button id="add_station" type="button" style="width: 100px;height: 30px;margin-top: 5px;border-radius: 3px;border: #1E90FF solid 1px;background-color: #1E90FF;color: white;line-height: 25px;" onclick="submit_data()">
                提交
            </button>
        </div>
    </div>
    <hr>

    <div style="width: 100%;height: 95%;overflow: auto;">
        <div id="menu_from"
             style="width: 100%;height: 100%;color: #2C3E50;display: inline-block;vertical-align: top;background: white;">
            <div style="width: 100%;height: 90%;display: inline-block;vertical-align: center;">

                <div style="width: 95%;margin-left: 2.5%;margin-top: 1%;height: 40px;padding-left: 0.5%;line-height: 40px;background: white;border: #cfcfcf solid 1px;text-align: center;">
                    <h3 id="form_name" style="letter-spacing: 8px;">会议请假申请表</h3>
                </div>
                <div style="width: 95%;margin-left: 2.5%;">
                    <table style="width: 100%;">
                        <tr style="width: 100%;">
                            <td colspan="4" style="width: 100%;height: 35px;background: #F5F5F5;padding-left: 0.5%;line-height: 40px;border-right: #cfcfcf solid 1px;border-left: #cfcfcf solid 1px;color: #00a0e9;">基本信息</td>
                        </tr>
                        <tr style="margin-left: 1%;">
                            <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;letter-spacing: 2.2px;">
                                申&nbsp;请&nbsp;人
                            </td>
                            <td id="applicat" style="width: 35%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ obj.apply_user.real_name }}</td>
                            <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                申请科室
                            </td>
                            <td id="company" style="width: 35%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">{{ obj.company.name }}
                            </td>
                        </tr>
                        <tr style="width: 100%;">
                            <td colspan="4" style="width: 100%;height: 35px;background: #F5F5F5;padding-left: 0.5%;line-height: 40px;border-right: #cfcfcf solid 1px;border-left: #cfcfcf solid 1px;color: #00a0e9;">申请详情</td>
                        </tr>
                        <tr style="margin-left: 1%;">
                            <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                请假会议
                            </td>
                            <td colspan="3" style="width: 85%;height: 35px;line-height: 35px;padding-left: 0.5%;border: #cfcfcf solid 0.5px;outline: none">
                                <select name="" id="leave_meeting" style="width: 100%;height: 100%;border: none;outline: none;">
                                    <option value="0">请选择请假会议</option>
                                    {% for foo in MeetRoomObj %}
                                        <option value="{{ foo.parent_id.id }}" {% if obj.meet_main and obj.meet_main.id == foo.parent_id.id %}selected{% endif %}>{{ foo.parent_id.particulars }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr style="margin-left: 1%;">
                            <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                请假原因
                            </td>
                            <td id="reason" colspan="3" style="width: 85%;height: 35px;line-height: 35px;padding-left: 0.5%;border: #cfcfcf solid 0.5px;outline: none" contenteditable="true">{{ obj.reason }}</td>
                        </tr>
                        <tr style="margin-left: 1%;">
                            <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;letter-spacing: 1.2px;">
                                备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注
                            </td>
                            <td id="note" colspan="3" style="width: 85%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;outline: none" contenteditable="true">{{ obj.note }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("supervision_inspection_management").className = "add_class";
            document.getElementById("personage").className = "add-nav-active";

        };

        function submit_data() {
            var form = new FormData();
            var reason = document.getElementById('reason').innerText;
            var note = document.getElementById('note').innerText;
            var leave_meeting = document.getElementById('leave_meeting').value;

            if (!reason) {
                alert('请假原因不能为空！')
                return false
            }
            if (leave_meeting === '0') {
                alert('请选择请假会议！')
                return false
            }
            document.getElementById("loading").style.display = "inline-block";
            form.append("reason", reason);
            form.append('note', note)
            form.append('leave_meeting', leave_meeting)
            form.append('flow_id', {{ obj.id }})
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/new-flow-logic/meetingleaveindex.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("创建成功");
                            window.location = "/new-flow-logic/meetingleavelist.html";
                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
             };
        }

        function save_data() {
            var form = new FormData();
            var reason = document.getElementById('reason').innerText;
            var note = document.getElementById('note').innerText;
            var leave_meeting = document.getElementById('leave_meeting').value;

            document.getElementById("loading").style.display = "inline-block";
            form.append("reason", reason);
            form.append('note', note)
            form.append('leave_meeting', leave_meeting)
            form.append('flow_id', {{ obj.id }})
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/new-flow-logic/meetingleavedraft.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("保存成功！");
                            window.location = "/new-flow-logic/meetingleavelist.html";
                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
             };
        }
    </script>
{% endblock %}



